﻿@section ExternalDependencies {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
}

@(Html.DevExtreme().HtmlEditor()
    .ID("html-editor")
    .Height(550)
    .Content(@<text>
        <h2>
            <img src="~/images/widgets/HtmlEditor.svg" alt="HtmlEditor" />
            Formatted Text Editor (HTML Editor)
        </h2>
        <br>
        <p>
            DevExtreme HTML5 JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format
            textual and visual content and store it as HTML or Markdown.
        </p>
        <p>Supported features:</p>
        <ul>
            <li>
                Inline formats:
                <ul>
                    <li><strong>Bold</strong>, <em>italic</em>, <s>underlined</s> text formatting</li>
                    <li>Font, size, color changes (HTML only)</li>
                </ul>
            </li>
            <li>
                Block formats:
                <ul>
                    <li>Headers</li>
                    <li>Text alignment</li>
                    <li>Lists (ordered and unordered)</li>
                    <li>Code blocks</li>
                    <li>Quotes</li>
                </ul>
            </li>
            <li>Custom formats</li>
            <li>HTML and Markdown support</li>
            <li>Mail-merge placeholders (for example, %username%)</li>
            <li>Adaptive toolbar for working images, links, and color formats</li>
            <li>Insert images as a link or base64 (drag and drop images to convert them to base64)</li>
            <li>Copy-paste rich content (unsupported formats are removed)</li>
        </ul>
    </text>)
    .Toolbar(toolbar => toolbar.Items(
        items => {
            items.Add().FormatName(HtmlEditorToolbarItem.Undo);

            items.Add().FormatName(HtmlEditorToolbarItem.Redo);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add()
                .FormatName("size")
                .FormatValues(new[] { "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" });

            items.Add()
                .FormatName("font")
                .FormatValues(new[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" });

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Bold);

            items.Add().FormatName(HtmlEditorToolbarItem.Italic);

            items.Add().FormatName(HtmlEditorToolbarItem.Strike);

            items.Add().FormatName(HtmlEditorToolbarItem.Underline);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignLeft);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignCenter);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignRight);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignJustify);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.OrderedList);

            items.Add().FormatName(HtmlEditorToolbarItem.BulletList);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add()
                .FormatName("header")
                .FormatValues(new JS("[false, 1, 2, 3, 4, 5]"));

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Color);

            items.Add().FormatName(HtmlEditorToolbarItem.Background);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Link);

            items.Add().FormatName(HtmlEditorToolbarItem.Image);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Clear);

            items.Add().FormatName(HtmlEditorToolbarItem.CodeBlock);

            items.Add().FormatName(HtmlEditorToolbarItem.Blockquote);
        })
    )
    .MediaResizing(m => m.Enabled(true))
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Value(true)
            .Text("Multiline toolbar")
            .OnValueChanged("change_multiline")
        )
    </div>
</div>

<script>
    function change_multiline(e) {
        $("#html-editor")
            .dxHtmlEditor("instance")
            .option("toolbar.multiline", e.value);
    }
</script>
